<template>
  <div class="footer">
    <div class="container w">
      <div class="siteinfo">
        <ul class="c0" v-for="(item,i) in footerList" :key="i">
          <h3 class="c1">{{ item.title }}</h3>
          <ul>
            <li class="c2" v-for="(items,i) in item.list" :key="i"><a href="#">{{ items }}</a></li>
          </ul>
        </ul>
        <ul class="c3">
          <li class="tel">188xxxxxxxx</li>
          <li class="time">周一至周日 10:00-23:00</li>
          <li class="online"><button>在线帮助</button></li>
        </ul>
      </div>
      <div class="copyright">
        <h4 class="copytext">Copyright ©2021, 陈博华, All Rights Reserved.本网站设计内容大部分属锤子科技</h4>
        <ul class="privacy">
          <li><a href="#">法律声明</a></li>
          <li><a href="#">隐私条款</a></li>
          <li><a href="#">开发者中心</a></li>
        </ul>
      </div>
      <div class="cop"><a href="#">京ICP备XXXXXXXX号-1</a></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Bottom',
  data() {
    return {
      footerList: [
        {
          title: '订单服务',
          list: ['购买指南','支付方式','送货政策']
        },
        {
          title: '服务支持',
          list: ['官方开源','项目前端','项目后端']
        },
        {
          title: '自助服务',
          list: ['个人博客','个人简介','个人视频']
        },
        {
          title: '关注我吧',
          list: ['腾讯QQ','新浪微博','官方邮箱']
        }
      ]
    }
  }
}
</script>

<style scoped>
.footer {
  height: 300px;
  margin-top: 50px;
  background: #fff;
}
.container {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
.siteinfo {
  height: 100px;
  padding: 50px 0 130px;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
}
.c0 {
  width: 149px;
  float: left;
}
.c1 {
  color: #646464;
  font-size: 12px;
  padding: 0 0 14px;
}
.c2 {
  font-size: 12px;
  padding: 6px 0;
}
.c2 a {
  color: #c3c3c3;
}
.c3 {
  float: right;
}
.c3 .tel {
  font-size: 30px;
  color: #646464;
}
.c3 .time {
  font-size: 12px;
  color: #c3c3c3;
  text-align: right;
  margin-top: 5px;
}
.online button {
  width: 130px;
  height: 34px;
  font-size: 14px;
  color: #5079d9;
  border: 1px solid #dcdcdc;
  margin-top: 8px;
  border-radius: 4px;
  background-color: #fcfcfc;
  cursor: pointer;
}
.online {
  margin-top: 10px;
  text-align: right;
}
.copyright {
  overflow: hidden;
  margin-top: 30px;
  font-size: 12px;
}
.copytext {
  float: left;
}
.privacy {
  margin-left: 10px;
  float: left;
}
.privacy li {
  float: left;
  padding: 1px 10px 0;
  border-left: 1px solid #ccc;
  box-sizing: border-box;
}
.cop {
  margin-top: 20px;
  font-size: 12px;
}
.cop a {
  color: #bdbdbd;
}
</style>